<template>
  <div class="agreement">
    <div class="underline" style="width: 120px">
      <span class="title1 color1 zIndex fontBold"> 联系我们 </span>
    </div>
    <div class="agreement_content font400 content3 color3">
      <div class="container">
        <div class="contact-item">
          <div class="item">
            <span class="contact-title">电话：</span>
            <span class="contact-msg">
              <a :href="'tel:' + associationObj.phone">{{
                  associationObj.phone
              }}</a>
            </span>
          </div>
          <div class="item">
            <span class="contact-title">资质咨询电话：</span>
            <span class="contact-msg"><a href="tel:(0755) 23941857">(0755) 23941857</a></span>
          </div>
          <div class="item">
            <span class="contact-title">电子邮箱：</span>
            <span class="contact-msg"><a href="mailto:srea@163.com">{{ associationObj.email }}</a></span>
          </div>
          <div class="item">
            <span class="contact-title">投诉受理电话：</span>
            <span class="contact-msg"><a href="tel:0755-23941857">0755-23941857</a></span>
          </div>
          <!-- <div class="item">
            <span class="contact-title">传真：</span>
            <span class="contact-msg"><a href="tel:0755-83788970">{{ associationObj.fax }}</a></span>
          </div> -->
          <div class="item">
            <span class="contact-title">邮编：</span>
            <span class="contact-msg">{{ associationObj.post_code }}</span>
          </div>
          <div class="item">
            <span class="contact-title">地址：</span>
            <span class="contact-msg">{{ associationObj.address }}</span>
          </div>
        </div>
        <div class="contnent-code flex-row">
          <div style="margin-right: 5px">
            <svg aria-hidden="true" class="css">
              <use xlink:href="#icon-gongzhonghao" />
            </svg>
            <div class="contnent-msg">
              关注深房协 微信公众号
            </div>
            <div class="contnent-img">
              <img :src="associationObj.image1">
            </div>
          </div>
          <div style="margin-left: 5px">
            <svg aria-hidden="true" class="css">
              <use xlink:href="#icon-weixin" />
            </svg>
            <div class="contnent-msg">
              关注深房协 官方微信
            </div>
            <div class="contnent-img">
              <img :src="associationObj.image2">
            </div>
          </div>
        </div>
        <VueAMap :center="[121.59996, 31.197646]" :zoom="12" @init="initMap" />
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div @click="back" class="btn_item cancle font400 content3 color4">
        返回
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { onMounted } from 'vue'
// import VueAMap from '@vuemap/vue-amap'
// import '@vuemap/vue-amap/dist/style.css'
// import Amap from '@amap/amap-jsapi-loader'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ref } from 'vue'
import { getAssociations } from '@/api'
const router = useRouter()
const store = useStore()

// Amap.load({
//   key: '991c03c4524f9fb552a2fa8442ccb49a', // 申请好的Web端开发者Key，首次调用 load 时必填
//   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
//   plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
//   AMapUI: { // 是否加载 AMapUI，缺省不加载
//     version: '1.1', // AMapUI 缺省 1.1
//     plugins: [] // 需要加载的 AMapUI ui插件
//   },
//   Loca: { // 是否加载 Loca， 缺省不加载
//     version: '1.3.2' // Loca 版本，缺省 1.3.2
//   }
// }).then(() => {
//   console.log(13123123123123)
// })

// console.log(9999, Amap)

const associationObj: any = ref({})

const getAssociationslist = async () => {
  const res: any = await getAssociations()
  associationObj.value = res[0]
  console.log(res)
}

getAssociationslist()

const initMap = (e: any) => {
  console.log('init map: ', e)
}
const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}
</script>

<style lang="less" scoped>
.agreement {
  padding: 0 15px 80px;
  margin-top: 40px;
  margin-right: ;

  .agreement_content {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    line-height: 25px;
  }
}

.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

  .footer_btn {
    padding: 0 30px;
    height: 100%;

    .cancle {
      width: 100%;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
  }
}

.flex-row {
  -webkit-box-orient: horizontal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-col[data-v-566bd328],
.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
}

.flex-col {
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
}

.cont {
  // padding: 35px 35px 0;
  // background-color: #fff;
  // -webkit-box-shadow: 0 0 15px #fbf2e9;
  // box-shadow: 0 0 15px #fbf2e9
}

.cont>img {
  width: 100%;
}

.contact-msg,
.contact-msg a {
  font-size: 14px;
  line-height: 24px;
  color: #666;
}

.number {
  height: 44px;
  font-size: 28px;
  font-weight: 700;
  color: #f57d3c;
  line-height: 39px;
}

.add {
  position: absolute;
  font-size: 30px;
  top: -5px;
  left: 70px;
  font-weight: 700;
  color: #f57d3c;
}

.type {}

.content-item {
  margin-top: 30px;
  position: relative;
  font-size: 28px;
}

.title {
  font-weight: 700;
  color: #f57d3c;
  line-height: 48px;
  width: 100%;
  border-bottom: 1px solid #dedede;
  font-size: 24px;
  padding: 0 0 5px 0;
}

.flexItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.content {
  margin-top: 29px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.content-img {
  position: relative;
  margin-right: 48px;
}

.info {
  position: absolute;
  top: 425px;
  width: 341px;
  height: 110px;
  background: #f57d3c;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding-left: 20px;
}

.info-name {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
}

.info-msg {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

.type {
  font-size: 16px;
  font-weight: 400;
  color: #1f1f1f;
  line-height: 26px;
}

.type-English {
  margin-top: 20px;
  height: 75px;
  font-size: 18px;
  font-weight: 400;
  color: #b0b0b0;
  line-height: 30px;
}

.msg {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 26px;
  position: relative;
  height: 1050px;
}

.sign {
  position: absolute;
  right: 0;
  margin-top: 40px;
}

.content-items {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  text-align: left;
  margin-bottom: 10px;
}

.content-English {
  height: 37px;
  font-weight: 400;
  color: #908a87;
  line-height: 24px;
  font-size: 14px;
}

.content-Chinese {
  margin-top: 17px;
  font-size: 26px;
  height: 50px;
  font-weight: 400;
  color: #1f1f1f;
  line-height: 42px;
}

.contnent-code {
  background: #f57d3c;
  margin-top: 30px;
  padding: 30px 20px;
  justify-content: space-between;
}

.contnent-msg {
  width: 138px;
  height: 41px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 24px;
  margin: 12px 0 20px 0;
}

.contnent-code svg {
  width: 39px;
  text-align: center;
  height: 39px;
  line-height: 39px;
  border-radius: 50%;
  background-color: #fff;
  font-size: 48px;
}

.contnent-img img {
  width: 100%;
}

.item {
  margin-top: 15px;
  // display: flex;
}

.contact-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  width: 190px;
  margin-top: 10px;
}

@media (min-width: 750px) {
  .contact-title {
    font-size: 12px;
    line-height: 24px;
    font-weight: bold;
    // width: 190px;
    display: contents;
    margin-top: 0;
  }

  .item {
    margin-top: 0px;
    // display: flex;
  }

  .agreement {
    padding: 0 30px 80px;
    margin-top: 40px;

    .agreement_content {
      margin-top: 20px;
      padding: 15px;
      background-color: #fff;
      border-radius: 5px;
      line-height: 25px;
    }
  }

  .contact-msg,
  .contact-msg a {
    font-size: 12px;
    line-height: 24px;
    color: #666;
  }

  .contnent-code {
    background: #f57d3c;
    margin-top: 30px;
    padding: 30px 20px;
    justify-content: space-between;
  }

  .contnent-code svg {
    width: 39px;
    text-align: center;
    height: 39px;
    line-height: 39px;
    border-radius: 50%;
    background-color: #fff;
    font-size: 48px;
  }

  .contnent-msg {
    width: 124px;
    height: 41px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 24px;
    margin: 12px 0 20px 0;
  }

  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

    .footer_btn {
      padding: 0 30px;
      height: 100%;

      .cancle {
        width: 100%;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }
    }
  }
}
</style>
